import { Component, Prop, Vue, Emit, Watch } from 'vue-property-decorator'
import styles from './refundDialog.less'
import service from '@/lib/service'
import { payTypes } from '@/lib/sealFormat'

const refundReasonTypes = [
  {
    label: '申请单填写有误',
    value: 1,
  },
  {
    label: '不想申请了',
    value: 2,
  },
  {
    label: '付费方式需要变更',
    value: 3,
  },
  {
    label: '其他原因',
    value: 4,
  },
]
@Component({})
export default class RefundDialog extends Vue {
  @Prop({ default: true }) private visible!: boolean
  @Prop({ default: () => {} }) private defaultData!: any
  @Prop({ default: 'refundDetail' }) private type!: string
  @Prop({ default: false }) private disabled!: boolean

  private title: string = ''
  // private refundSealApplyId = "";
  private refundReasonType: string = ''
  private refundOtherReason: string = ''
  private refundReasonTip: boolean = false
  private info: any = {}
  private payTypesObj: any = {}

  protected render() {
    return (
      <el-dialog
        class={styles.refundDialog}
        custom-class="refund-dialog"
        title={this.title}
        visible={this.visible}
        width="570px"
        before-close={this.beforeClose}
      >
        <div>
          {this.type === 'newApply' && (
            <div class="refund-tip">
              此申请单已完成支付，请确认是否撤回申请并发起退款？
            </div>
          )}
          <div
            class={
              this.type === 'newApply'
                ? 'refund-info refund-info-margin'
                : 'refund-info'
            }
          >
            <div class="line-item">
              <div class="line-item-label">申请编号</div>
              <div class="line-item-content">{this.info.sealApplyRecordNo}</div>
            </div>
            <div class="line-item">
              <div class="line-item-label">电子印章名称</div>
              <div class="line-item-content">{this.info.sealName}</div>
            </div>
            <div class="line-item">
              <div class="line-item-label">付费方式</div>
              <div class="line-item-content">
                {this.payTypesObj[this.info.payType]}
              </div>
            </div>
            {this.type === 'refundDetail' && (
              <div class="line-item">
                <div class="line-item-label">退款原因</div>
                <div class="line-item-content">{this.info.refundReason}</div>
              </div>
            )}

            {this.type === 'newApply' && (
              <div class="line-item refund-reason">
                <div class="line-item-label">撤回原因</div>
                <div class="line-item-content">
                  <el-select
                    class={
                      this.refundReasonTip && !this.refundReasonType
                        ? 'refund-reason-error'
                        : ''
                    }
                    v-model={this.refundReasonType}
                    placeholder="请选择"
                  >
                    {refundReasonTypes.map((type: any, index: number) => (
                      <el-option
                        key={type.value}
                        label={type.label}
                        value={type.value}
                      />
                    ))}
                  </el-select>
                </div>
                {this.refundReasonTip && !this.refundReasonType && (
                  <span class="refund-reason-tip">请选择撤回原因</span>
                )}
              </div>
            )}
            <div class="line-item">
              <div class="line-item-label">退款金额</div>
              <div class="line-item-content">
                <span class="refund-amount">¥{this.info.refundAmount}</span>
              </div>
            </div>
            <div class="line-item">
              <div class="line-item-label">退款理由</div>
              <div class="line-item-content">
                {this.type === 'newApply' ? (
                  <el-input
                    type="textarea"
                    v-model={this.refundOtherReason}
                    placeholder="选填"
                    maxlength="255"
                    show-word-limit
                  />
                ) : (
                  this.info.refundReasonDetail || '--'
                )}
              </div>
            </div>
            {this.type === 'refundDetail' && (
              <div class="line-item">
                <div class="line-item-label">发起退款时间</div>
                <div class="line-item-content">
                  {this.info.refundCreateTime}
                </div>
              </div>
            )}
            {this.type === 'refundDetail' && this.defaultData.status === 94 && (
              <div class="line-item">
                <div class="line-item-label">完成退款时间</div>
                <div class="line-item-content">
                  {this.info.refundConfirmTime}
                </div>
              </div>
            )}
            <p class="refund-prompt">
              <i class="el-icon-warning" />
              {this.defaultData.status === 94
                ? '如有疑问请咨询4000878198转3(政务服务专线)'
                : '发起退款后需要后台工作人员审核通过，如有疑问请咨询4000878198转3(政务服务专线)'}
            </p>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          {this.type === 'newApply' && (
            <el-button
              onClick={() => {
                this.submit()
              }}
              disabled={this.disabled}
              loading={this.disabled}
            >
              确认撤回并发起退款
            </el-button>
          )}
          <el-button
            type={this.type === 'newApply' ? 'primary' : ''}
            onClick={() => {
              this.beforeClose()
            }}
          >
            关闭
          </el-button>
        </span>
      </el-dialog>
    )
  }
  private mounted() {
    payTypes.map(type => {
      this.payTypesObj[type.id] = type.value

      return null
    })
  }

  private submit() {
    if (!this.refundReasonType) {
      this.refundReasonTip = true

      return
    }
    const data = {
      sealApplyId: this.defaultData.sealApplyId,
      reasonType: this.refundReasonType,
      otherReason: this.refundOtherReason,
    }
    this.$emit('submit', data)
    // this.beforeClose()
  }

  private beforeClose() {
    this.$emit('visibleChange', false)
  }

  @Emit('visibleChange')
  private visibleChange(val: boolean) {
    return val
  }

  @Watch('visible')
  visibleHandler(val: boolean) {
    if (val) {
      this.refundReasonType = ''
      this.refundOtherReason = ''
      this.refundReasonTip = false
      this.disabled = false
      service({
        url: '/seal/rest/payOrder/refundDetail',
        method: 'POST',
        body: {
          payOrderId: this.defaultData.payOrderId,
        },
      }).then(res => {
        this.info = res.data
      })
    }
    if (this.type === 'newApply') {
      this.title = '申请撤回确认'
    } else {
      this.title = '退款信息'
    }
  }
}
